<!--
 * @Author: wcc007
 * @Date: 2022-11-22 16:41:21
 * @LastEditors: wcc007
 * @LastEditTime: 2022-11-22 18:04:40
 * @Description: file content
 * @FilePath: \front-end-of-task-center\src\components\generator\form-extention\un-d-matrix-table\index.vue
-->
<template>
  <div class="un-d-matrix-table">
    <div
      class="rate-item"
      v-for="(item, index) in rowData"
      :key="index"
    >
      <div class="rate-title" :style="titleStyle">{{item[0]}}</div>
      <div>
        <el-rate v-model="item[1]" :max="rowLength"></el-rate>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'UnDMatrixTable',
  props: {
    rowList: Array,
    value: Array,
    rowLength: Number,
    titleWidth: Number,
    updateRateData: {
      type: Function,
      default: () => {}
    }
  },
  data() {
    return {
      rowData:this.value || this.rowList
    }
  },
  computed: {
    titleStyle () {
      return {
        width: this.titleWidth + 'px'
      }
    }
  },
  watch: {
    rowData: {
      handler(val) {
        this.updateRateData(val)
      },
      deep: true
    }
  }
}
</script>

<style scoped lang="scss">
.rate-item {
  display: flex;

  .rate-title {
    // width: 100px;
  }
}
</style>